<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ServerURL.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			.mui-segmented-control .mui-control-items {
				line-height: 38px;
				display: table-cell;
				overflow: hidden;
				width: 1%;
				-webkit-transition: background-color .1s linear;
				transition: background-color .1s linear;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #007aff;
				border-color: #007aff;
				border-left: 1px solid #007aff;
			}
			
			.mui-control-items {
				font-size: 1.1em;
			}
			
			.mui-segmented-control {
				width: 99.8%;
			}
		</style>
		<div class="mui-segmented-control" style="margin-bottom: 1px;">
			<!--
        	<a class="mui-control-item mui-active" href="chat_list.html">聊天</a>
        	作者：1471846120@qq.com
        	时间：2018-03-08
        	描述：-
       -->
			<a class="mui-control-items" title="friendster.html" href="friendster/friendster.html">朋友圈</a>
			<a class="mui-control-items" href="mail_list.html" id="tongxunlusize">通讯录 </a>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content">
			<ul class="mui-table-view">
				<!--
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="官方团队">
						<img class="mui-media-object mui-pull-left" src="images/set1.jpg">
						<div class="mui-media-body">
							官方团队
							<p class="mui-ellipsis">团队人员招聘，团队人员招聘，团队人员招聘。</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="官方新闻">
						<img class="mui-media-object mui-pull-left" src="images/qq.png">
						<div class="mui-media-body">
							官方新闻
							<p class="mui-ellipsis">最新更新发布，最新更新发布，最新更新发布。</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="官方团队">
						<img class="mui-media-object mui-pull-left" src="images/qihoo.png">
						<div class="mui-media-body">
							官方团队
							<p class="mui-ellipsis">团队人员招聘，团队人员招聘，团队人员招聘。</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="官方公众号">
						<img class="mui-media-object mui-pull-left" src="images/weixin.png">
						<div class="mui-media-body">
							官方公众号
							<p class="mui-ellipsis">公众号发布，公众号发布，最新更新发布。</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" title="官方公众号">
						<img class="mui-media-object mui-pull-left" src="images/set3.jpg">
						<div class="mui-media-body">
							官方公众号
							<p class="mui-ellipsis">公众号发布，公众号发布，最新更新发布。</p>
						</div>
					</a>
				</li>
				作者：1471846120@qq.com
                	时间：2018-03-30
                	描述：
                -->
			</ul>
		</div>

	</body>
	<!--模板-->
	<script type="text/html" id="radio-tigan">
		<li class="mui-table-view-cell mui-media" id="chatlist{{num}}">
			<a href="javascript:;" title="{{titleName}}" sid="{{sid}}" onclick="gotoliaotian('{{titleName}}','{{sid}}');">
				<img class="mui-media-object mui-pull-left" style="border-radius: 10%;line-height: 43px;height: 43px;width: 43px;" src="{{imgsrc}}">
				<div class="mui-media-body">
					{{titleName}}
					<p class="mui-ellipsis">{{titleContent}}</p>
				</div>
			</a>
		</li>
	</script>
	<script type="text/javascript">
		//读取页面时动态预加载
		window.onload = function() {
			var refreshGet = "0";
			LodingList();
			//朋友圈及通讯录
			mui('.mui-segmented-control').on("tap", "a", function(e) {
				var title = this.getAttribute("title");
				//跳转的链接及标识
				var taghref = this.getAttribute("href");
				mui.openWindow({
					url: taghref,
					id: title,
					styles: {
						//top:"40px",//新页面顶部位置
					},
					//打开窗口时传参方法
					extras: {
						title: title
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					},
					waiting: {
						autoShow: true,
						title: "正在加载中...",
						options: {
							//									width: 
							//									height:
						}
					}
				})
			})

			function getuesrinfo() {
				var txtName = localStorage.getItem("txtName");
				mui.alert("当前用户名：" + txtName);
			}

			//mui.toast(txtName,{ duration:'2000', type:'div' });
			//动态数据加载
			//相关的处理事件，动态获取时只需要将for循环替换为AJAX的SUCCESS事件中去就好了。 

			function LodingList() {
				//请求数据
				var loginID = localStorage.getItem("loginID");
				mui.ajax({
					type: "post",
					url: ServerURL + '/selectPersonalChatLogList',
					async: true,
					data: {
						"pageNum": 10,
						"pageSize": 10,
						"sendUserId": loginID,
						//"sendUserId": "2b294a27bc87450f84556c70ffba5c01",
						"type": 0
					},
					dataType: "jsonp",
					jsonp: "jsoncallback",
					timeout: 1000, //超时时间设置为2秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data, status, xhr) {
						var successString = JSON.parse(data);
						console.log("返回的聊天记录数据内容为 : " + data);
						var codelog = successString.code;
						if(data.indexOf("sendName") != -1) {
							//console.log("返回的数据list内容长度为 : " + successString.data.list.length);
							var listlength = successString.data.list.length;
							refreshGet = listlength;
							var listdata = successString.data.list;
							//开始加入缓存
							localStorage.setItem("selectPersonalChatLogList", data);
							//清除之前的
							$(".mui-table-view").html("");
							//获取题干模板 
							for(var i = 0; i < successString.data.list.length; i++) {
								tiganStr = $("#radio-tigan").html();
								//替换相关的字段值 
								tiganStr = del_html_tags(tiganStr, "{{num}}", i); //修改ID的值 
								var picture = "images/user-photo.png";
								if(listdata[i].sendUserId != loginID) {
									picture = listdata[i].sendHeadImg;
								} else {
									picture = listdata[i].receiveHeadImg;
								}
								if(null != picture || undefined != picture) {
									if(picture.length > 1) {
										tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", picture);
									} else {
										tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", "images/user-photo.png");
									}
								} else {
									tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", "images/user-photo.png");
								}
								if(listdata[i].receiveUserId == loginID) {
									tiganStr = del_html_tags(tiganStr, "{{sid}}", listdata[i].sendUserId);
									tiganStr = del_html_tags(tiganStr, "{{titleName}}", listdata[i].sendName); //添加题目内容 
								} else {
									tiganStr = del_html_tags(tiganStr, "{{sid}}", listdata[i].receiveUserId);
									tiganStr = del_html_tags(tiganStr, "{{titleName}}", listdata[i].receiveName); //添加题目内容 
								}
								tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", listdata[i].imgsrc);
								tiganStr = del_html_tags(tiganStr, "{{titleContent}}", listdata[i].content);
								$(".mui-table-view").append(tiganStr); //替换之后追加到选项中去
							}
						} else if(codelog == "-1") {
							readingcache();
							mui.toast('网络连接错误！');
						} else {
							readingcache();
							mui.toast('无聊天记录列表');
						}
						return data;
					},
					error: function(xhr, type, errorThrown) {
						console.log("error: " + type);
						readingcache();
						return "获取数据失败：服务器错误！";
					}
				});

			}
			//定时刷新得方法（1秒钟一次）
			setInterval(LodingListrefresh, 2000);

			function LodingListrefresh() {

				//请求数据
				var loginID = localStorage.getItem("loginID");
				if(refreshGet != "0") {
					mui.ajax({
						type: "post",
						url: ServerURL + '/selectPersonalChatLogList',
						async: true,
						data: {
							"pageNum": 10,
							"pageSize": 10,
							"sendUserId": loginID,
							//"sendUserId": "2b294a27bc87450f84556c70ffba5c01",
							"type": 0
						},
						dataType: "jsonp",
						jsonp: "jsoncallback",
						timeout: 1000, //超时时间设置为2秒；
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data, status, xhr) {
							var successString = JSON.parse(data);
							//console.log("刷新的聊天记录数据内容为 : " + data);
							var codelog = successString.code;
							if(codelog != "-1") {
								//console.log("返回的数据list内容长度为 : " + successString.data.list.length);
								var listslength = successString.data.list.length;
								if(listslength != refreshGet) {
									//区域刷新
									LodingList();
									console.log("page1刷新一次！");
								}
							} else if(codelog == "-1") {
								//readingcache();
								//mui.toast('网络连接错误！');
							} else {
								//readingcache();
								//mui.toast('无聊天记录列表');
							}
							return data;
						},
						error: function(xhr, type, errorThrown) {
							console.log("error: " + type);
							//readingcache();
							return "获取数据失败：服务器错误！";
						}
					});
				}
				//开始刷新通讯录添加好友消息
				tongxunluxiaoxi();
			}
		}
		var tongxunluxiaoxisize = 0;
		//通讯录消息刷新
		function tongxunluxiaoxi() {
			var loginID = localStorage.getItem("loginID");
			mui.ajax({
				type: "post",
				url: ServerURL + '/selectFriend',
				async: true,
				data: {
					"status": "2",
					"userId": loginID
					//"userId":"3393e986607546bb8870f1ff42185f70"
				},
				dataType: "jsonp",
				jsonp: "jsoncallback",
				timeout: 1000, //超时时间设置为2秒；
				headers: {
					'Content-Type': 'application/json'
				},
				success: function(data, status, xhr) {
					var successString = JSON.parse(data);
					//console.log("刷新的通讯录消息数据内容为 : " + data);
					var codelog = successString.code;
					if(codelog != "-1") {
						//console.log("返回的新消息为 : " + successString.data.length + "条");
						var listslength = successString.data.length;
						if(listslength > 0 && listslength != tongxunluxiaoxisize) {
							//消息刷新
							$("#tongxunlusize").html("通讯录<span class='mui-badge mui-badge-danger' style='top: -7px;right:2px;position:relative;'>"+listslength+"</span>");
							tongxunluxiaoxisize = listslength;
							console.log("page1刷新通讯录消息一次！");
						}
					} else if(codelog == "-1") {
						//readingcache();
						//mui.toast('网络连接错误！');
					} else {
						//readingcache();
						//mui.toast('无聊天记录列表');
					}
					return data;
				},
				error: function(xhr, type, errorThrown) {
					console.log("error: " + type);
					//readingcache();
					return "获取数据失败：服务器错误！";
				}
			});
		}
		//聊天
		function gotoliaotian(title, sid) {
			//getuesrinfo();
			mui.openWindow({
				//url: "page1_chat.html",
				//id: "page1_chat.html",
				url: "im-chat.html",
				id: "im-chat.html",
				styles: {
					//top:"40px",//新页面顶部位置
				},
				//打开窗口时传参方法
				extras: {
					title: title,
					tid: sid
				},
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				},
				waiting: {
					autoShow: true,
					title: "正在加载中...",
					options: {
						//width: 
						//height:
					}
				}
			})
		}
		//缓存方法
		function readingcache() {
			//请求数据
			var loginID = localStorage.getItem("loginID");
			var listdatas = localStorage.getItem("selectPersonalChatLogList");
			var str1 = JSON.parse(listdatas);
			var listdata = str1.data.list;
			console.log("读取缓存数据：" + listdata);
			//获取题干模板 
			for(var i = 0; i < listdata.length; i++) {
				tiganStr = $("#radio-tigan").html();
				//替换相关的字段值 
				tiganStr = del_html_tags(tiganStr, "{{num}}", i); //修改ID的值 

				var picture = "images/user-photo.png";
				if(listdata[i].sendUserId != loginID) {
					picture = listdata[i].sendHeadImg;
				} else {
					picture = listdata[i].receiveHeadImg;
				}
				if(null != picture || undefined != picture) {
					if(picture.length > 1) {
						tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", picture);
					} else {
						tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", "images/user-photo.png");
					}
				} else {
					tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", "images/user-photo.png");
				}
				if(listdata[i].receiveUserId == loginID) {
					tiganStr = del_html_tags(tiganStr, "{{sid}}", listdata[i].sendUserId);
					tiganStr = del_html_tags(tiganStr, "{{titleName}}", listdata[i].sendName); //添加题目内容 
				} else {
					tiganStr = del_html_tags(tiganStr, "{{sid}}", listdata[i].receiveUserId);
					tiganStr = del_html_tags(tiganStr, "{{titleName}}", listdata[i].receiveName); //添加题目内容 
				}
				tiganStr = del_html_tags(tiganStr, "{{imgsrc}}", listdata[i].imgsrc);
				tiganStr = del_html_tags(tiganStr, "{{titleContent}}", listdata[i].content);
				$(".mui-table-view").append(tiganStr); //替换之后追加到选项中去
			}

		}
		//自定义一个方法批量替换制定的字符 
		function del_html_tags(str, reallyDo, replaceWith) {
			var e = new RegExp(reallyDo, "g");
			words = str.replace(e, replaceWith);
			return words;
		}
	</script>

</html>